import * as React from 'react'
import StackView from '../../component/common/StackView'

interface BreadProp {
    stackView: StackView,
    endComponent?: typeof React.Component
}

export default class MyBread extends React.Component<BreadProp, any> {
    constructor(props: BreadProp) {
        super(props)
        const { stackView } = props
        this.state = {
            views: stackView.getViews(this.props.endComponent)
        }
    }

    clickBreadItem(index: number) {
        this.props.stackView.clickViewItem(index);
    }

    render() {
        const { views } = this.state
        return (
            <div>
                <ul className="view-bread">
                    {views.map((item, index, array) =>
                        index === views.length - 1 ?
                            <li key={item.name} title={item.name} className="view-bread-item item-last" >{item.name}</li> :
                            <li key={item.name} title={item.name} className="view-bread-item">
                                <a onClick={() => { this.clickBreadItem(index) } } href="javascript:;">{item.name}</a>
                                <span className="item-separator">></span>
                            </li>
                    )
                    }
                </ul>
            </div>
        )
    }
}